<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Object</title>
    <link rel="shortcut icon" href="../../../../favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="../../css/object.css">
</head>

<body>
    <div id="control">
        <h2>选择器一</h2>
        <div class="radio">
            <input class="selectradio" checked type="radio" name="controlradio" id="radio1">
            <label for="radio1">none</label>
            <input class="selectradio" type="radio" name="controlradio" id="radio2">
            <label for="radio2">getElementsByClassName("item")</label>
            <input class="selectradio" type="radio" name="controlradio" id="radio3">
            <label for="radio3">baseElement.querySelector("#item3")</label>
            <input class="selectradio" type="radio" name="controlradio" id="radio4">
            <label for="radio4">baseElement.querySelectorAll("#item5,#item7,#item9")</label>
        </div>
    </div>
    <div class="content1">
        <div class="item" data-color="ca4c4c" id="item1">1</div>
        <div class="item" data-color="ca794c" id="item2">2</div>
        <div class="item" data-color="95ca4c" id="item3">3</div>
        <div class="item" data-color="4ccaa6" id="item4">4</div>
        <div class="item" data-color="4ca9ca" id="item5">5</div>
        <div class="item" data-color="4c74ca" id="item6">6</div>
        <div class="item" data-color="984cca" id="item7">7</div>
        <div class="item" data-color="ca4ca5" id="item8">8</div>
        <div class="item" data-color="ca4c88" id="item9">9</div>
        <div class="item" data-color="ca684c" id="item10">10</div>
    </div>
    <hr>

    <div class="tips">
        <h2>选择器二</h2>
        <ul>
            <li>返回下面两个section中所有li标签 <button id="libtn">获取所有li</button></li>
            <li>返回某个section下所有span中内容为HTML的span标签 <button id="span1">第一个section</button> <button
                    id="span2">第二个section</button></li>
            <li>返回某个section下，所有所包含span内容为spanCont的LI标签 <button id="li1">第一个section</button> <button
                    id="li2">第二个section</button></li>
            <li>返回某个section下，class为active的链接中包含的文字内容 <button id="active1">第一个section</button> <button
                id="active2">第二个section</button></li>
        </ul>
    </div>
    <div id="wrapper">
        <div id="news-top" class="section">
            <h3>Some title, #news-top 第一个section</h3>
            <div class="content">
                <ul>
                    <li><span>HTML</span><a href="">Some Link1</a></li>
                    <li><span>JS</span><a class="active" href="#">Some Link2</a></li>
                    <li><span>CSS</span><a href="">Some Link3</a></li>
                    <li><span>JS</span><a href="">Some Link4</a></li>
                </ul>
            </div>
            <p class="">Some Text</p>
            <img src="">
        </div>
        <div id="news-normal" class="section">
            <h3>Some title, #news-normal 第二个section</h3>
            <div class="content">
                <ul>
                    <li><span>HTML</span><a href="">Some Link1</a></li>
                    <li><span>HTML</span><a href="">Some Link2</a></li>
                    <li><span>JS</span><a class="active" href="#">Some Link3</a></li>
                    <li><span>CSS</span><a href="">Some Link4</a></li>
                </ul>
            </div>
            <p class="">Some Text</p>
            <img src="">
        </div>
    </div>

    <script src="../../js/object.js"></script>
</body>

</html>